<!DOCTYPE html>
<html lang="es">
<head>
	<meta charset="UTF-8">
	<title>Ejercicio 5</title>
	<meta http-equiv="Content-Type" content="text/html" charset="UTF-8" />
	<style type="text/css">

	form {
		display: block;
		margin: 0 auto;
		margin-top: 5%;
		min-width: 520px;
		max-width: 520px;
	}

	label {
		display: block;
		margin: 15px;
		text-align: left;
		margin-left: 40px;
	}	

	input {
		margin: 0 auto;
		margin-right: 10px;
	}

	.cuadro {
		width: 250px;
	}

	#radios {
		margin-left: 20px;
		display: inline;
	}

	.r {
		display: inline;
		margin: 0px;
		margin-left: 15px;
	}

	#boton {
		display: block;
		margin: 0 auto;
		margin-top: 20px;
		max-width: 230px;
		margin-top: 20px;
		margin-bottom: 5px;
	}

	#metodo {
		display: block;
		margin: 15px;
	}

	.pre {
		display: inline-block;
		max-width: 80px;
		min-width: 70px;		
	}

	.post {
		float: right;
		width: 70px;
	}

	</style>
	<script type="text/javascript">
	var nombre, apellido, numero, telefono;
	var busqueda = 0;

	function volver() {
		location.replace("index.php");
	}

	function enviar() {

		if (busqueda == 0) {

			nombre = document.getElementById("nombre").value;
			apellido = document.getElementById("apellido").value;

			if (nombre == "" || nombre.length > 30) {
				alert("El nombre no es correcto");
			} else if  (apellido == "" || apellido.length > 50) {
				alert("El apellido no es correcto");
			} else {
				var consulta = "js=dna&nombre="+nombre+"&apellido="+apellido;
				despedir(consulta);
			}
		} else {
			numero = document.getElementById("numero").value;
			if (isNaN(numero)) {
				alert("El número de empelado no es correcto");
			} else {
				var consulta = "js=dne&numero="+numero;
				despedir(consulta);
			}
		}

	}

	function despedir(consulta) {
		var xmlhttp = new XMLHttpRequest();

		xmlhttp.open("POST", "control.php", true);
		xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
		xmlhttp.send(consulta);

		xmlhttp.onreadystatechange = function() {
			if (xmlhttp.readyState==4 && xmlhttp.status==200) {
				var respuesta = xmlhttp.responseText;
				if (respuesta == "true") {
					alert("Empleado despedido correctamente");
					limpiar();
				} else if (respuesta == "false") {
					alert("El empleado no existe");
				} else if (respuesta == "Error de conexión") {
					alert(respuesta);
				} else {					
					alert("Error grave");
					document.writeln(respuesta);
				}
			}
		}

	}

	function ajax(consulta) {
		var xmlhttp = new XMLHttpRequest();

		xmlhttp.open("POST", "control.php", true);
		xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
		xmlhttp.send(consulta);

		xmlhttp.onreadystatechange = function() {
			if (xmlhttp.readyState==4 && xmlhttp.status==200) {
				var texto = xmlhttp.responseText;
				var oculto = document.getElementById("postnum");
				var cuadro = document.getElementById("numero");
				oculto.innerHTML = texto;				
				if (texto == "Existe") {
					oculto.style.color = "blue";
					cuadro.style.border = "";
				} else {
					oculto.style.color = "red";
					cuadro.style.border = "2px inset red";
				}
			}
		}

	}

	function limpiar() {

		document.getElementById("nombre").value = "";
		document.getElementById("apellido").value = "";
		document.getElementById("numero").value = "";
		document.getElementById("postnum").innerHTML = "";		
		
	}

	function cambiar(opcion) {
		var cambio1 = document.getElementById("cambio1");
		var cambio2 = document.getElementById("cambio2");

		if (opcion == 0) {
			cambio1.style.display = "";
			cambio2.style.display = "none";
			busqueda = 0;
		} else {			
			cambio1.style.display = "none";
			cambio2.style.display = "";
			busqueda = 1;
		}

	}

	function comprobacionNumero() {	
		var numero = document.getElementById("numero").value;
		var consulta = "js=cnum&numero="+numero;
		ajax(consulta);
	}

	</script>
</head>
<body>

	<form>
		<fieldset>
			<legend>Despido de Empleados</legend>
			<div id="metodo">
				<div id="radios">
					<span class="pre">Selección</span>
					<label class="r">
						<input type="radio" name="opcion" onclick="cambiar(0)" checked='checked'>
						Nombre y apellido
					</label>
					<label class="r"> 
						<input type="radio" name="opcion" onclick="cambiar(1)">
						NumEmp
					</label>
				</div>
			</div>
			<span id="cambio1">
				<label>
					<span class="pre">Nombre</span>
					<input type="text" id="nombre" class="cuadro">
				</label>
				<label>
					<span class="pre">Apellido</span>
					<input type="text" id="apellido" class="cuadro">
				</label>
			</span>
			<span id="cambio2" style="display: none;">
				<label>
					<span class="pre">NumEmp</span>
					<input type="text" id="numero" class="cuadro" onkeyup="comprobacionNumero()">
					<span class="post" id="postnum"></span>
				</label>
			</span>
			<div id="boton">
				<input type="button" value="Despedir" onclick="enviar()">
				<input type="button" value="Cancelar y volver" onclick="volver()">
			</div>
		</fieldset>
	</form> 

</body>
</html>